<template>
  <el-dialog class="public-dialog" title="添加商品" width="80vw" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="flex mb-[6px]">
      <span class="text-[20px] mr-[6px]">备货</span>
    </div>
    <el-table :data="[formData.base_asin_list]" border style="width: 100%">
      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.label" minWidth="180">
        <template #default="{ row }">
          <VText :value="row?.[item.value]" :line="2" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row, $index }">
          <el-button type="primary" link @click="openAddAsin('asin')"> 选择Asin店铺 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex mb-[6px] mt-[12px]"><span class="text-[20px] mr-[6px]">跟卖</span> <el-button type="primary" @click="openAddAsin('followAsin')"> 选择跟卖店铺 </el-button></div>

    <el-table :data="formData.base_follow_asin_relation" border style="width: 100%" height="500">
      <el-table-column label="Asin" prop="base_asin_list.asin" minWidth="180" />
      <el-table-column label="国家" prop="base_asin_list.site_code" minWidth="180" />

      <el-table-column label="备货SKU" minWidth="180">
        <template #default> {{ formData?.base_asin_list?.sku }} </template>
      </el-table-column>
      <el-table-column label="历史SKU" prop="base_asin_list.sku" minWidth="180" />

      <el-table-column label="sku名称" prop="base_asin_list.sku_title" minWidth="180">
        <template #default="{ row }"> <VText :value="row?.base_asin_list.sku_title" :line="2" /> </template>
      </el-table-column>
      <el-table-column label="跟卖店铺" prop="base_asin_list.store_name" minWidth="180" />
      <el-table-column label="运营人员" prop="base_asin_list.operator_user_text" minWidth="180" />
      <el-table-column label="操作" width="80">
        <template #default="{ row, $index }">
          <el-button type="danger" link @click="dtlFollow($index)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button type="primary" @click="submit"> 确认 </el-button>
    </template>
    <addAsin ref="addAsinRef" @submit="closeAddAsin" :handleType="handleType" />
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { followCreate, followEdit, followDetail } from "../../api.js"

import addAsin from "../addAsin/index"
const addAsinRef = ref()
const emit = defineEmits(["submit", "handleClose"])

// 操作类型  新增 编辑
const operationType = ref("")
// 删除 跟卖
const dtlFollow = (index) => {
  formData.value.base_follow_asin_relation.splice(index, 1)
}

const columns = [
  { label: "Asin", value: "asin" },
  { label: "国家", value: "site_code" },
  { label: "备货SKU", value: "sku" },
  { label: "sku名称", value: "sku_title" },
  { label: "Asin店铺", value: "store_name" },
  { label: "运营人员", value: "operator_user_text" },
]

const handleType = ref("")
const openAddAsin = (type) => {
  handleType.value = type
  if (type == "followAsin") {
    addAsinRef.value.open(type, formData.value)
  } else {
    addAsinRef.value.open(type)
  }
}

const formData = ref({ base_asin_list: {}, base_follow_asin_relation: [] })

const closeAddAsin = (list) => {
  console.log(list)
  // 备货sku
  if (handleType.value == "asin") {
    formData.value = {
      base_asin_list: {
        id: list[0].id,
        asin: list[0].asin,
        site_code: list[0].site_code,
        sku: list[0].sku,
        sku_title: list[0].sku_title,
        store_name: list[0].store_name,
        operator_user: list[0].operator_user,
        operator_user_text: list[0].operator_user_text,
        base_follow_asin_relation: [],
      },
      base_follow_asin_relation: [],
      // ...formData.value
      id: formData.value.id,
      status: formData.value.status,
      base_asin_id: list[0].id,
    }
  } else {
    let data = list.map((v) => ({
      base_asin_list: {
        id: v.id,
        asin: v.asin,
        site_code: v.site_code,
        sku: v.sku,
        sku_title: v.sku_title,
        store_name: v.store_name,
        operator_user_text: v.operator_user_text,
      },
    }))
    formData.value.base_follow_asin_relation = [...formData.value.base_follow_asin_relation, ...data]
  }
}

const modelValue = ref(false)

const submit = async () => {
  let request = null
  let params = {}
  if (operationType.value == "add") {
    request = followCreate
    params = {
      base_asin_id: formData.value.base_asin_list.id,
      status: 1,
      follow_asin_relation: formData.value.base_follow_asin_relation?.map((v) => ({ follow_base_asin_id: v.base_asin_list.id })),
    }
  } else {
    request = followEdit
    params = {
      id: formData.value.id,
      base_asin_id: formData.value.base_asin_id,
      status: formData.value.status,
      follow_asin_relation: formData.value.base_follow_asin_relation.map((v) => ({ follow_base_asin_id: v.base_asin_list.id })),
    }
  }
  // console.log("save")
  // console.log(params)
  request(params).then((res) => {
    handleClose()
  })
  // B07N2N41ZV
}
const handleClose = () => {
  modelValue.value = false
}

const open = (type, row = {}) => {
  operationType.value = type
  if (type == "add") {
    formData.value = { base_asin_list: {}, base_follow_asin_relation: [] }
  } else {
    followDetail({ id: row.id }).then((res) => {
      formData.value = { ...res.data }
    })
  }
  modelValue.value = true
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
